<template>
  <kinesis-container>
    <div class="login-wrap">
      <kinesis-element :parallaxStrength="4" :type="parallax">
        <div class="login-box">
        <div class="header"> 修改密码 </div>
          <!-- 表单 -->
        <div class="form-container">
            <div class="form">
            <el-form :model="userForm" status-icon :rules="rules" ref="userForm" label-width="100px">

                <el-form-item label="邮箱" prop="email" >
                    <el-col :span="20">
                    <el-input v-model="userForm.email" placeholder="请输入邮箱"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password" >
                    <el-col :span="20">
                            <el-input placeholder="请输入密码" v-model="userForm.password" show-password/>
                    </el-col>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword" >
                    <el-col :span="20">
                            <el-input placeholder="请输入确认密码" v-model="userForm.checkPassword" show-password/>
                    </el-col>
                </el-form-item>
                                <el-form-item label="验证码" prop="authCode" >
                    <el-col :span="10" >
                            <el-input placeholder="验证码" v-model="userForm.authCode" />
                    </el-col>
                    <el-col :offset="1" :span="12">
                           <el-button @click="getAuthCode" type="primary" :disabled="isDisabled">{{buttonName}}</el-button>
                    </el-col>
                </el-form-item>

                <el-form-item >
                    <el-col :span="20">
                    <el-button type="primary" @click="submitForm('userForm')">立即修改</el-button>
                    <el-button @click="resetForm('userForm')">重置</el-button>
                    </el-col>
    
                </el-form-item>
            </el-form>
            </div>
        </div>
        </div>

      </kinesis-element>
    </div>
  </kinesis-container>
</template>

<script>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
import {validatorEmail } from "@/utils/validate"
import Cookies from 'js-cookie'
export default {
  name: "login",
  data() {
         var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.userForm.checkPassword !== '') {
            this.$refs.userForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.userForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        var validateAuthCode = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入合法的验证码'));
        } else if (value !== this.authCode) {
            callback(new Error('验证码不对'));
        } 
        else {
            callback();
        }
        };

    return {
      // 表单
      userForm: {
        email: "2225602504@qq.com",
        password: "",
        checkPassword:'',
        authCode:'',
      },
      authCode:'123456',
      buttonName: "发送验证码",
	  isDisabled: false,
	  time: 10,
      parallax: "depth", // 视差类型
      loading: false, // 登录按钮是否加载
      redirect: undefined, // 重定向的路由,
            // 表单规则
      rules:{
        email:[
            { required: true,validator: validatorEmail, trigger: 'change' }
        ],
        password: [
            { validator: validatePass, trigger: 'blur' }
          ],
        checkPassword: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        authCode:[
            { required: true, message: '请输入合法的验证码', trigger: 'change' },
            { min: 6, max: 6, message: '长度在 为 6 的字符', trigger: 'change' },
             { validator:validateAuthCode, trigger: 'blur' }
        ],
      },
    };
  },
  components: {
    KinesisContainer,
    KinesisElement
  },
  watch: {
    $route: {
      handler: function(route) {
        // 记录当前路由
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await this.$store.dispatch('user/editPass',this.userForm)
            if(res.code == 1) {
                this.$message({ showClose: true, message: res.msg, type: 'success' })
                let that = this
                window.setTimeout(function() {
                          that.$router.push({ path: this.redirect || '/login?t='+new Date().getTime(),query: this.query || {}})

                    }, 1000);
            }else{
                  this.$message({ showClose: true, message: res.msg, type: 'error' })
            }
            this.$refs[formName].resetFields();
          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
            return false;
          }
        });
      },
      async getAuthCode() {
           const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if(!mailReg.test(this.userForm.email)) {
                 this.$message({ showClose: true, message: '请输入填写合法的邮箱数据', type: 'error' })
                 return
            } else{

                   let  that = this
                    that.isDisabled = true;
                    let interval = window.setInterval(function() {
                        that.buttonName = that.time + '秒后重新发送';
                        --that.time;
                        if(that.time < 0) {
                            that.buttonName = "重新发送";
                            that.time = 10;
                            that.isDisabled = false;
                            window.clearInterval(interval);
                        }
                    }, 1000);

                const res = await this.$store.dispatch('user/getAuthCode',{email:this.userForm.email})
                if(res.code == 1) {
                    this.authCode = res.data
                    console.log(res.data);
                    this.$message({ showClose: true, message: '发送验证码成功', type: 'success' })
                }else{
                    this.$message({ showClose: true, message: '发送验证码失败', type: 'error' })
                }

            }

        

          


        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({ showClose: true,  message: '重置成功',type: 'success'})
      }

  }
}

  

</script>

<style lang="scss">
@import "../../assets/styles/login.scss";

.header{
    margin-top: 50px;
    text-align: center;
    z-index: -999;
    margin-bottom: 20px;
    font-size: 20px;
    color: #606266;
    font-weight: 700;
}

</style>
